@charset "utf-8";
*{
    margin:0;
    padding:0;
}
img{
    display: block;
}
@keyframes move{
    0%{
        transform:rotate(0) scale(2);
        
    }
    100%{
        transform:rotate(360deg) scale(2);
        
    }
}
@keyframes suofang{
    0%{
        transform: scale(0.9);
    }
    100%{
        transform: scale(1);
    }
}
@keyframes doudong{
    10%{
        transform:scale(0.8);
    }
    50%{
        transform:scale(1) rotate(-10deg);
    }
    100%{
        transform: rotate(10deg);
    }
}
@keyframes need{
    0%{
        transform: scale(0.9);
    }
    100%{
        transform: scale(1.1)；
    }
}
@keyframes carscale{
    0%{
        transform: rotate(5deg);
    }
    100%{
        transform: rotate(-5deg);
    }
}
@keyframes huadong{
    0%{
        transform: scale(0.9);
    }
    100%{
        transform: scale(1.1);
    }
}
// page2动画
@keyframes fadeDown{
    0%{
        transform: translateY(-100vh);
    }
    100%{
        transform: translateY(0);
    }
}
@keyframes fadeout{
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(-100%);
    }
}
.fadeDown1{
    animation: fadeDown 1s linear;
    animation-fill-mode: forwards;
}
.fadeDown2{
    animation: fadeDown 1s 500ms linear;
    animation-fill-mode: forwards;
}
//page3动画
@keyframes fadeInBg{
    0%{
        transform: translateX(100vw);
    }
    100%{
        transform: translateX(0);
    }
}
@keyframes fadeInLeft{
    0%{
        transform: translateX(-100vw);
    }
    100%{
        transform: translateX(0);
    }
}
@keyframes fadeInRight{
    0%{
        transform: translateX(100vw);
    }
    100%{
        transform: translateX(0);
    }
}
.fadeInLeft{
    animation:fadeInLeft 500ms 500ms linear ;
    animation-fill-mode: forwards;
}
.fadeInRight{
    animation:fadeInRight 500ms 500ms  linear ;
    animation-fill-mode: forwards;
}
.fadeInBg{
    animation:fadeInBg 300ms  linear ;
    animation-fill-mode: forwards;
}
//page4动画
@keyframes jinlai{
    0%{transform: translateX(100%);}
    100%{transform: translateX(0);}
}
.jinlai{
    animation: jinlai 700ms linear;
    animation-fill-mode: forwards;
}
//page5动画
@keyframes person{
    0%{
        transform: translateX(-100vw);
    }
    100%{
        transform: translateX(0);
    }
}
.watch{
    animation: person 300ms linear;
    animation-fill-mode: forwards;
}
//page7动画
.page{
    animation: fadeInRight 300ms linear;
    animation-fill-mode: forwards;
}

body{
    overflow: hidden;
}
//总样式
#web{
    width:100%;
    height:100%;
    position: relative;
    overflow: hidden;
    .page0{
        width:100%;
        height:100%;
        background: url("../img/page0/star.png");
        padding-top:1px;
        position: absolute;
        left:0;
        top:0;
 
        .protagonist{
            width:90%;
            height:80%;
            position: absolute;
            left:5%;
            bottom:8%;
            z-index:2;
            img{
                display: block;
                width:100%;
                height:100%;
            }
        }
        .earth{
            position: absolute;
            bottom:0;
            right:0;
            width:70%;
            img{
                display: block;
                width:100%;
            }
        }
        .arrow{
            width:100%;
            height:7%;
            position: absolute;
            left:0;
            bottom:15%;
            z-index:3;
            text-align: center;
            img{
                display: block;
                height:100%;
                margin:auto;
            }
        }
        .pleaseWearEar{
            width:100%;
            height:10%;
            position: absolute;
            left:0;
            bottom:0;
            img{
                display: block;
                height:100%;
                margin:auto;
            }
        }
        .tiaoGuo{
            width:20%;
            height:5%;
            position: absolute;
            right:0;
            bottom:2%;
            z-index:6;
            img{
                display: block;
                height:100%;
            }
        }
        .loadres{
            width:30%;
            height:5%;
            position: absolute;
            left:5%;
            bottom:5%;
            font-size:70%;
            color:#000;
            z-index:7;
        }
    }
    .content{
        width:1000%;
        height:100%;
        display: none;
        .page1{
            width:10%;
            height:100%;
            overflow: hidden;
            float:left;
            position: relative;
            .index_bg{
                width:100%;
                height:100%;
                transform-origin: center;
                animation: move 3500ms linear infinite;
                img{
                    width:100%;
                    height:100%;
                    display: block;
                    
                }
            }
            .KuGouLog{
                width:40%;
                height:10%;
                position: absolute;
                top:2%;
                right:2%;
                z-index:2;
                
                img{
                    width:100%;
                    
                }
            }
            .index_secguess{
                width:100%;
                height:30%;
                position: absolute;
                left:0;
                top:12%;
                z-index:2;
                img{
                    width:80%;
                    margin:auto;
                }
            }
            .mouth{
                width:100%;
                height:30%;
                position: absolute;
                left:0;
                top:40%;
                z-index:3;
                animation: suofang 1000ms linear infinite;
                img{
                    width:80%;
                    margin:auto;
                }
            }
            .whatSong{
                width:100%;
                height:10%;
                position: absolute;
                left:0;
                top:50%;
                z-index:4;
            
                img{
                    height:100%;
                    margin:auto;
                }
            }
            .man_left{
                width:50%;
                height:30%;
                position: absolute;
                left:0;
                bottom:10%;
                z-index:5;
                img{
                    height:100%;
                    margin:auto;
                }
            }
            .man_right{
                width:50%;
                height:30%;
                position: absolute;
                right:0;
                bottom:10%;
                z-index:5;
                img{
                    height:100%;
                    margin:auto;
                }
            }
            .index_start{
                width:100%;
                height:8%;
                position: absolute;
                bottom:3%;
                z-index:7;
                animation: doudong 1000ms linear infinite;
                img{
                    height:100%;
                    margin:auto;
                }
            }
            .what{
                width:10%;
                height:10%;
                position: absolute;
                z-index:8;
                img{
                    width:100%;
                    
                }
            }
            .what1{
                right:40%;
                bottom:30%;
            }
            .what2{
                right:5%;
                bottom:30%;
            }
            .what3{
                right:40%;
                bottom:10%;
            }
            .what4{
                right:5%;
                bottom:10%;
            }
            .sixQuery{
                width:50%;
                height:30%;
                position: absolute;
                left:5%;
                bottom:10%;
                z-index:5;
                img{
                    height:100%;
                }
            }
        }
        .page2{
            width:10%;
            height:100%;
            position: relative;
            overflow: hidden;
            float:left;
            .yuan_bg{
                width:100%;
                height:100%;
                position: absolute;
            
                img{
                    width:100%;
                
                }
            }
            .movieHitSongCityWall{
                width:100%;
                height:20%;
                position: absolute;
                left:0;
                bottom:30%;
                z-index:4;
                img{
                    width:100%;
                }
            }
            .movieHitSongpeople{
                width:100%;
                height:40%;
                position: absolute;
                top:13%;
                left:0;
                z-index:2;
                transform: translateY(-100vh);
                img{
                    width:90%;
                    margin:auto;
                }
            }
            .movieHitSong{
                width:100%;
                height:16%;
                position: absolute;
                top:3%;
                left:0;
                z-index:3;
                transform: translateY(-100vh);
                img{
                    height:100%;
                }
            }
        }
        .page3{
            width:10%;
            height:100%;
            position: relative;
            overflow: hidden;
            float:left;
            .index_bg{
                width:100%;
                height:100%;
                transform: translateX(100vw);
                img{
                    width:100%;
                    height:100%;
                }
            }
            .lightearth{
                width:100%;
                height:15%;
                position: absolute;
                top:0;
                left:0;
                z-index:2;
                img{
                    width:100%;
                }
            }
            .stage{
                width:100%;
                height:20%;
                position: absolute;
                left:0;
                bottom:30%;
                z-index:3;
                img{
                    width:100%;
                }
            }
            .songer{
                width:100%;
                height:40%;
                position: absolute;
                left:0;
                top:20%;
                z-index:4;
                img{
                    height:100%;
                    margin:auto;
                }
            }
            .audienceLeft{
                width:30%;
                height:30%;
                position: absolute;
                left:0;
                bottom:40%;
                z-index:2;
                transform: translateX(-100vw);
                img{
                    height:100%;
                }
            }
            .audienceRight{
                width:30%;
                height:30%;
                position: absolute;
                right:28%;
                bottom:40%;
                z-index:10;
                transform: translateX(-100vw);
                img{
                    height:100%;
                }
            }
            .wow1{
                width:30%;
                height:30%;
                position: absolute;
                left:0;
                top:20%;
                z-index:10;
                img{
                    width:100%;
                }
            }
            .wow2{
                width:30%;
                height:30%;
                position: absolute;
                right: 0;
                top:20%;
                z-index:10;
                img{
                    width:100%;
                }
            }
        }
        .page4{
            width:10%;
            height:100%;
            overflow: hidden;
            position: relative;
            float:left;
            transform: translateX(100%);
            .yuan_bg{
                width:100%;
                height:100%;
                transform: scale(1.5);
                transform-style: center;
                img{
                    width:100%;
                    height:100%;
                }
            }
            .car{
                width:100%;
                height:30%;
                position: absolute;
                left:0;
                top:25%;
                z-index:2;
                animation:carscale 1s linear infinite;
                img{
                    width:90%;
                    margin:auto;
                }
            }
            .lightearth{
                width:100%;
                height:15%;
                position: absolute;
                top:0;
                left:0;
                z-index:2;
                img{
                    width:100%;
                }
            }
            .threeYao{
                width:100%;
                height:10%;
                position: absolute;
                top:10%;
                left:10%;
                z-index:3;
                animation:need 1s linear infinite;
                img{
                    width:70%;
                }
            }
            .hua{
                width:30%;
                height:20%;
                position: absolute;
                right:0;
                top:20%;
                z-index:4;
                img{
                    width:100%;
                }
            }
        }
        .page5{
            width:10%;
            height:100%;
            overflow: hidden;
            position: relative;
            float:left;
            .yuan_bg{
                width:100%;
                height:100%;
                transform: scale(1.2);
                position: absolute;
                left:10%;
                top:0;
                img{
                    width:100%;
                    height:100%;
                }
            }
            .lightearth{
                width:100%;
                height:15%;
                position: absolute;
                top:0;
                left:0;
                z-index:2;
                img{
                    width:100%;
                }
            }
            .watchpeos{
                width:100%;
                height:30%;
                position: absolute;
                left:0;
                top:10%;
                z-index:2;
                transform: translateX(-100vw);
                img{
                    width:100%;
                }
            }
            .sangBan1{
                width:50%;
                height:20%;
                position: absolute;
                left:0;
                top:30%;
                z-index:3;
                img{
                    width:100%;
                }
            }
            .jianfeizaode{
                width:50%;
                height:50%;
                position: absolute;
                right:15%;
                top:10%;
                z-index:4;
                img{
                    height:100%;
                }
            }
            .sangBan2{
                width:50%;
                height:20%;
                position: absolute;
                right:0;
                top:35%;
                z-index:5;
                img{
                    width:100%;
                }
            }
            .WCwalls{
                width:100%;
                height:30%;
                position: absolute;
                top:40%;
                z-index:1;
                img{
                    height:100%;
                }
            }
            .feiZhao{
                width:50%;
                height:8%;
                position: absolute;
                left:0;
                bottom:30%;
                z-index:6;
                img{
                    height:100%;
                    margin:auto;
                }
            }
        }
        .page6{
            width:10%;
            height:100%;
            position: relative;
            overflow: hidden;
            float:left;
            .yuan_bg{
                width:100%;
                height:100%;
                img{
                    width:100%;
                    height:100%;
                    transform: scale(1.6);
                    transform-origin: center;
                }
            }
            .lightearth{
                width:70%;
                height:20%;
                position: absolute;
                top:0;
                right:0;
                z-index:2;
                img{
                    height:100%;     
                }
            }
            .oldman{
                width:100%;
                height:50%;
                position: absolute;
                top:10%;
                z-index:4;
                img{
                    width:80%;
                    margin:auto;     
                }
                
            }
            .juhualeft{
                width:50%;
                height:25%;
                position: absolute;
                left:0;
                top:30%;
                z-index:3;
                animation: huadong 1s linear infinite;
                img{
                    height:100%;
                }
            }
            .juhuaright{
                width:30%;
                height:25%;
                position: absolute;
                right:0;
                top:30%;
                z-index:3;
                animation: huadong 1s linear infinite;
                img{
                    width:100%;
                }
            }
        }
        .page7{
            width:10%;
            height:100%;
            position: relative;
            float:left;
            .manwoman_bg{
                width:100%;
                height:100%;
                img{
                    width:100%;
                    height:100%;
                }
            }
            .wuman{
                width:50%;
                height:40%;
                position: absolute;
                right:0;
                top:15%;
                z-index:2;
                
                img{
                    width:100%;
                }
            }
            .man{
                width:40%;
                height:30%;
                position: absolute;
                left:10%;
                top:28%;
                z-index:2;
                img{
                    height:100%;
                }
            }
            .wogeiyou{
                width:100%;
                height:25%;
                position: absolute;
                top:5%;
                z-index:1;
                img{
                    height:100%;
                }
            }
        }
        .page8{
            width:10%;
            height:100%;
            position: relative;
            overflow: hidden;
            float:left;
            .user_bg{
                width:100%;
                height:100%;
                img{
                    width:100%;
                    height:100%;
                }
            }
            .KuGouLog{
                width:40%;
                height:10%;
                position: absolute;
                top:2%;
                right:2%;
                z-index:2;
                
                img{
                    width:100%;
                    
                }
            }
            .glod{
                width:30%;
                height:30%;
                position: absolute;
                top:7%;
                left:35%;
                z-index:2;
                margin:auto;
                img{
                    width:100%;
                
                }
            }
            .userint{
                width:40%;
                height:8%;
                position: absolute;
                left:2%;
                top:2%;
                z-index:2;
                background: url("../img/page8/userint.png")no-repeat;
                background-size:100% 100%;
                .touxiang{
                    width:20%;
                    height:60%;
                    position: absolute;
                    left:8%;
                    top:18%;
                    background:url("../img/page8/touxinag.png")no-repeat center;
                    background-size:100%;
                }
                .name{
                    width:60%;
                    height:50%;
                    position: absolute;
                    top:30%;
                    right:0;
                    font-size:60%;
                }
            }
            .info{
                width:100%;
                height:8%;
                position: absolute;
                top:30%;
                z-index:3;
                background: url("../img/page8/info.png")no-repeat 50% 0;
                background-size: 50% 100%;
                .text3{
                    width:30%;
                    height:70%;
                    position: absolute;
                    top:20%;
                    left:35%;
                    font-weight:600;  
                }
            }
            .buttonleft{
                width:50%;
                height:10%;
                position: absolute;
                left:5%;
                bottom:33%;
                background:url("../img/page8/buttonleft.png")no-repeat;
                background-size:80% 80%;
                z-index:3;
                .text1{
                    width:55%;
                    height:55%;
                    position: absolute;
                    top:10%;
                    left:22%;
                    font-size: 80%;
                }
            }
            .buttonright{
                width:50%;
                height:10%;
                position: absolute;
                right:0;
                bottom:33%;
                background:url("../img/page8/buttonright.png")no-repeat;
                background-size:80% 75%;
                z-index:3;
                .text2{
                    width:55%;
                    height:55%;
                    position: absolute;
                    top:10%;
                    left:5%;
                    font-size: 80%;
                }
            }
            .text{
                width:100%;
                height:20%;
                position: absolute;
                left:0;
                top:40%;
                z-index:3;
                background:url("../img/page8/text.png")no-repeat 40% 0;
                background-size:90% 80%;
                .txt{
                    font-size:80%;
                    width:80%;
                    height:65%;
                    position: absolute;
                    left:10%;
                    top:10%;
                }
            }
            .paiming_title{
                width:100%;
                height:10%;
                position: absolute;
                left:0;
                bottom:22%;
                z-index:4;
                img{
                    height:100%;
                    margin:auto;
                }
            }
            .paiming_bg{
                width:100%;
                height:22%;
                position: absolute;
                left:0;
                bottom:3%;
                background: url("../img/page8/paiming_bg.png")no-repeat 45% 0;
                background-size:90% 100%;
                .text4{
                    width:86%;
                    height:80%;
                    position: absolute;
                    left:5%;
                    top:10%;
                    overflow-y: auto;
                    #tab{
                        width:100%;
                        width:100%;
                        tbody{
                            width:100%;
                            font-size:70%;
                            tr{
                                height:30%;
                                text-align: center;
                                td{
                                    width:20%;
                                    img{
                                        width:50%;
                                        margin:auto;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    
}
@keyframes opacityinfo{
    0%{
        opacity:0;
    }
    50%{
        opacity:1;
    }
    100%{
        opacity:0;
    }
}
.opacityinfo{
    animation:opacityinfo  1s linear ;
}
#web{
    .option{
        width:65%;
        height:20%;
        position: absolute;
        left:5%;
        bottom:10%;
        z-index:99;
        display:none;
        .selectA{
            width:100%;
            height:40%;
            position: relative;
            background:url("../img/selectA.png")no-repeat;
            background-size:100% 80%;
            .answer1{
                width:75%;
                height:67%;
                position: absolute;
                left:20%;
                top:12%;
                font-size:80%;
                text-align:center;
                font-family: "微软雅黑";
            }
        }
        .selectB{
            width:100%;
            height:40%;
            position: relative;
            background:url("../img/selectB.png")no-repeat;
            background-size:100% 80%;
            .answer2{
                width:75%;
                height:67%;
                position: absolute;
                left:20%;
                top:12%;
                font-size:80%;
                text-align:center;
                font-family: "微软雅黑";
            }
        }
        .selectC{
            width:100%;
            height:40%;
            position: relative;
            background:url("../img/selectC.png")no-repeat;
            background-size:100% 80%;
            .answer3{
                width:75%;
                height:67%;
                position: absolute;
                left:20%;
                top:12%;
                font-size:80%;
                text-align:center;
                font-family: "微软雅黑";
            }
        }
    }
    .time{
        width:15%;
        height:10%;
        background:url("../img/smallMouth.png")no-repeat;
        background-size:100%;
        position: absolute;
        right:5%;
        bottom:20%;
        z-index:999;
        display:none;
        .timetext{
            width:40%;
            height:40%;
            position: absolute;
            top:22%;
            left:25%;
            font-size: 80%;
        }
    }
   
    .share{
        width:100%;
        height:100%;
        position: absolute;
        top:0;
        left:0;
        z-index:9999;
        display:none;
        img{
            width:100%;
            height:100%;
        }
    }
    .alertinfo{
        width:60%;
        height:10%;
        position: absolute;
        left:15%;
        top:30%;
        background:#eee;
        z-index:1000000;
        padding:5%;
        border-radius: 2%;
        color:#666;
        opacity: 0;
    }
}